
<template>
  <el-container class="container">
    <el-header class="home-header">
      <el-row>
        <el-col :span="8">
          <img src="../../assets/images/logo.png" alt="图片加载失败">
        </el-col>
        <el-col :span="8">
          <h1 class="header-h1">电商后台管理系统</h1>
        </el-col>
        <el-col :span="8">
          <div class="header-right">
            欢迎上海前端100期星曜会员
            <a href="#" @click.prevent="loginOut">退出</a>
          </div>
        </el-col>
      </el-row>
    </el-header>
    <el-container class="home-container">
      <el-aside class="home-aside" width="200px">
        <!--
          el-menu : 菜单父组件
           - default-active="2" 默认高亮状态

          el-submenu  子菜单 (可展开  里面可以有元素 el-menu-item)

          el-menu-item : 子菜单-元素
             router="true"

        -->
        <el-menu
          :router="true"
          default-active="1"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/users">用户列表</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>权限管理</span>
            </template>
            <el-menu-item index="/roses">角色列表</el-menu-item>
            <el-menu-item index="/rights">权限列表</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main class="home-main">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  methods: {
    /**
     * 退出
     */
    loginOut () {
      this.$confirm('此操作将永久退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        // 点击确定走这个
        .then(() => {
          // 2. 清除token
          localStorage.removeItem('token')

          this.$message({
            type: 'success',
            message: '退出成功!'
          })

          // 1. 回到登录页面
          this.$router.push('/login')
        })
        // 点击取消走这个
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取退出'
          })
        })
    },
    /**
     * 开
     */
    handleOpen () {
      console.log('开')
    },
    handleClose () {
      console.log('关')
    }
  }
}
</script>

<style lang='less'>
.container {
  height: 100%;
  min-width: 860px;
}

.home-header {
  height: 60px;
  padding: 0;
  background: #b3c1cd;
}

.header-h1 {
  text-align: center;
  line-height: 60px;
  height: 60px;
  font-size: 28px;
  color: #fff;
}
.header-right {
  text-align: right;
  line-height: 60px;
  padding-right: 40px;

  a {
    color: #daa520;
  }
}
/* .header-right a {
} */
/* 左侧 */
.home-aside {
  background: #545c64;
}

/* main */
.home-main {
  background: #eaeef1;
}
</style>
